<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社管理系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body class="bg-light">
    <div id="app">
        <div v-if="!isAuthenticated" class="container">
            <div class="row justify-content-center align-items-center min-vh-100">
                <div class="col-md-6 col-lg-4">
                    <div class="card shadow-sm">
                        <div class="card-body p-4">
                            <h2 class="text-center mb-4">旅行社管理系统</h2>
                            <form @submit.prevent="handleLogin">
                                <div class="mb-3">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="username" 
                                           v-model="loginForm.username" 
                                           required
                                           autocomplete="username">
                                </div>
                                <div class="mb-3">
                                    <label for="password" class="form-label">密码</label>
                                    <input type="password" 
                                           class="form-control" 
                                           id="password" 
                                           v-model="loginForm.password" 
                                           required
                                           autocomplete="current-password">
                                </div>
                                <div class="alert alert-danger" v-if="loginError">
                                    {{ loginError }}
                                </div>
                                <button type="submit" 
                                        class="btn btn-primary w-100" 
                                        :disabled="isLoading">
                                    {{ isLoading ? '登录中...' : '登录' }}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isAuthenticated: false,
                loginForm: {
                    username: '',
                    password: ''
                },
                loginError: null,
                isLoading: false
            },
            created() {
                // 检查是否已经登录
                const token = localStorage.getItem('token');
                if (token) {
                    this.isAuthenticated = true;
                    window.location.href = '/dashboard.html';
                }
            },
            methods: {
                async handleLogin() {
                    this.loginError = null;
                    this.isLoading = true;
                    
                    try {
                        const loginResponse = await auth.login(
                            this.loginForm.username,
                            this.loginForm.password
                        );
                        
                        if (loginResponse.access_token) {
                            localStorage.setItem(API_CONFIG.TOKEN_KEY, loginResponse.access_token);
                            
                            // 获取用户信息
                            const user = await auth.getCurrentUser();
                            localStorage.setItem(API_CONFIG.USER_KEY, JSON.stringify(user));
                            
                            window.location.href = '/dashboard.html';
                        }
                    } catch (error) {
                        console.error('Login error:', error);
                        this.loginError = error.response?.data?.detail || '登录失败，请检查用户名和密码';
                    } finally {
                        this.isLoading = false;
                    }
                }
            }
        });
    </script>
</body>
</html> 